<template>
  <div>
    <div class="main">
      <van-sticky :offset-top="560">
        <van-button type="warning" @click="onPosition" class="position">常见问题</van-button>
      </van-sticky>
      <div class="header">
        <van-nav-bar
          title="记住了，我叫未知耗"
          left-arrow
          fixed
          @click-left="onClickLeft"
        >
          <template #right>
            <van-icon name="share-o" size="18" />
          </template>
        </van-nav-bar>
        <div class="center">
          <div class="zhuti">
            <h4>快乐生日 | RiCO生日祝福系列线上跑</h4>
            <div class="ip">
              <div class="left">
                <span>线上马拉松</span>
                <span>IP跑系列</span>
              </div>
              <div class="right">
                <span>参与人数1286</span>
              </div>
            </div>
            <!-- 分割线 -->
            <div class="fgx"></div>
            <!-- 内容部分 -->
            <div class="text">
              <div class="sanlan">
                <div class="zuo">报名时间</div>
                <div class="zhong">2023.06.27 15:30 - 2023.08.21 23:59</div>
                <div class="you"></div>
              </div>
              <div class="sanlan">
                <div class="zuo">活动时间</div>
                <div class="zhong">2023.07.21 15:30 - 2023.08.22 23:59</div>
                <div class="you"></div>
              </div>
              <div class="sanlan">
                <div class="zuo">活动玩法</div>
                <div class="zhong">如何玩转</div>
                <div class="you">></div>
              </div>
              <div class="sanlan">
                <div class="zuo">挑战目标</div>
                <div class="zhong">2.33 公里 快乐的记忆/9.99 公里</div>
                <div class="you">></div>
              </div>
              <div class="sanlan">
                <div class="zuo">活动奖励</div>
                <div class="zhong">
                  <img src="@/assets/pic/hot-9.png" alt="" />
                  <img src="@/assets/pic/hot-10.png" alt="" />
                </div>
                <div class="you">></div>
              </div>
              <div class="sanlan">
                <div class="zuo">奖励发放</div>
                <div class="zhong">活动时间内未完成不发放活动奖励</div>
                <div class="you">></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="footer">
        <van-button type="primary" class="apply">马上报名</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Button } from "vant";
import { NavBar } from "vant";
import { Icon } from "vant";
import { Sticky } from "vant";

Vue.use(Sticky);
Vue.use(Icon);
Vue.use(NavBar);
Vue.use(Button);

export default {
  methods: {
    onClickLeft() {
      this.$router.push("/home/indexV/activity");
    },
    onPosition(){
      this.$router.push("/activity/position");
    }
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.main {
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 667px;
  background-color: #fbe0f3;
  .position{
    margin-left: 280px;
    width: 70px;
    height: 28px;
    background-color: gray;
    border-radius: 12px;
    font-size: 12px;
    border: 3px solid white;
  }
  .header {
    color: white;
    // background-color: #000;
  }
  .center {
    width: 350px;
    margin: 0 auto;
    .zhuti {
      margin-top: 100px;
      background-color: #d4abf1;
      width: 350px;
      box-sizing: border-box;
      padding: 12px;
      height: 350px;
      border-radius: 10px;
      color: white;
      .text {
        .sanlan {
          margin-top: 15px;
          display: flex;
          align-items: center;
          font-size: 14px;

          .zuo {
            width: 20%;
            opacity: 0.5;
          }
          .zhong {
            width: 75%;
            display: flex;
            img {
              width: 50px;
              height: 50px;
              margin-right: 10px;
            }
          }
          .you {
            width: 5%;
            opacity: 0.5;
          }
        }
      }
      .fgx {
        height: 1px;
        background-color: #fff;
        opacity: 0.1;
      }
      .ip {
        margin: 20px 0;
        font-size: 12px;
        display: flex;
        justify-content: space-between;
        .left {
          display: flex;
          span {
            margin-right: 10px;
            display: block;
            text-align: center;
            width: 65px;
            font-weight: 700;
            background-color: #e5e5e5;
            opacity: 0.5;
            border-radius: 3px;
          }
        }
        
      }
    }
  }
  .footer {
    position: absolute;
    bottom: 0;
    .apply {
      width: 100vw;
    }
  }
}
</style>
